@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Fonts */
@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Source Han Sans';
  src: url('https://fonts.gstatic.com/ea/notosanssc/v3/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  /* Color Scheme */
  --color-star: #e0e0e0;
  --color-star-light: #ffffff;
  --color-accent: #6c5ce7;
  --color-background: rgba(10, 10, 20, 0.85);
  --color-card: rgba(40, 40, 40, 0.7);
  --color-card-light: rgba(50, 50, 60, 0.8);
  
  /* Typography */
  --font-english: 'Roboto', 'Open Sans', sans-serif;
  --font-chinese: 'Source Han Sans', sans-serif;
  
  line-height: 1.6;
  font-weight: 400;
}

/* Global Styles */
body {
  font-family: var(--font-chinese), var(--font-english);
  background-color: #000;
}

/* Custom Utilities */
.star-glow {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.star-glow-hover:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}

.text-shadow {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(20, 20, 30, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(200, 200, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 200, 255, 0.5);
}